export default function updateNodeElement(newElement, virtualDOM, oldVirtualDOM = {}) {
  // 获取节点对应的属性
  const newProps = virtualDOM.props || {}
  const oldProps = oldVirtualDOM.props || {}

  if(virtualDOM.type === 'text') {
    if(newProps.textContent !== oldProps.textContent) {
      if(virtualDOM.parent.type !== oldVirtualDOM.parent.type) {
        virtualDOM.parent.stateNode.appendChild(document.createTextNode(newProps.textContent))
      }else {
        virtualDOM.parent.stateNode.replaceChild(document.createTextNode(newProps.textContent), oldVirtualDOM.stateNode)
      }
    }
    return
  }

  for(const propName in newProps) {
    // 获取新旧属性值
    const newPropsValue = newProps[propName]
    const oldPropsValue = oldProps[propName]
    // 新旧属性值不同的一系列操作
    if(oldPropsValue !== newPropsValue) {
      // 判断属性是否是事件属性, onClick -> click
      if(propName.slice(0,2) === 'on') {
        const eventName = propName.slice(2).toLowerCase()
        // 为元素添加事件
        newElement.addEventListener(eventName, newPropsValue)
        // 如果更新的时候旧事件存在则删除
        if(oldPropsValue) {
          newElement.removeEventListener(eventName, oldPropsValue)
        }
      } else if(propName === 'value' || propName === 'checked') {
        // 直接赋值
        newElement[propName] = newPropsValue
      } else if (propName !== 'children') {
        // 类名特殊处理一下
        if(propName === 'className') {
          newElement.setAttribute('class', newPropsValue)
        } else {
          newElement.setAttribute(propName, newPropsValue)
        }
      }
    }
  }
  // 判断属性被删除的情况
  Object.keys(oldProps).forEach(propName => {
    const newPropsValue = newProps[propName]
    const oldPropsValue = oldProps[propName]
    // 属性被删除了
    if(!newPropsValue) {
      if(propName.slice(0,2) === 'on') {
        const eventName = propName.toLowerCase().slice(2)
        newElement.removeEventListener(eventName, oldPropsValue)
      }else if(propName !== 'children') {
        newElement.removeAttribute(propName, oldPropsValue)
      }
    }
  })
}